<template>
  <view class="companyBenefits">
    <view class="benefits">
      <view class="title-row">请选择公司福利</view>
      <view class="selected-row">
        <text class="selected-count">已选 ({{selectedBenefits.length}}/15)</text>
        <view class="selected-tags">
          <view class="selected-tag" v-for="(item, index) in selectedBenefits" :key="index">
            {{item}}
            <text class="delete-icon" @click="removeTag(item)">×</text>
          </view>
        </view>
      </view>
      
      <view class="title-row">推荐福利</view>
      <view class="tags-container">
        <view class="tag" 
              v-for="(item, index) in recommendBenefits" 
              :key="index"
              @click="toggleTag(item)"
              :class="{'active': selectedBenefits.includes(item)}">
          {{item}}
        </view>
        <view class="custom-tag" @click="showCustomTagPopup">
          <text class="custom-icon">+</text>
          <text>自定义标签</text>
        </view>
      </view>
      
      <view class="title-row">其他福利</view>
      <view class="other-benefits">
        <view class="benefit-row" v-for="(benefit, index) in otherBenefitLabels" :key="index">
          <view class="benefit-label">{{benefit.label}}</view>
          <view class="benefit-value">{{benefit.value}}</view>
        </view>
      </view>
    </view>
    <view class="bottom-btn">
      <view class="save-btn" @click="submit">确认保存</view>
    </view>
    
    <!-- 底部弹窗 -->
    <view class="popup-mask" v-if="showPopup" @click="closePopup"></view>
    <view class="popup-container" v-if="showPopup">
      <view class="popup-header">
        <text class="cancel-btn" @click="closePopup">取消</text>
        <text class="popup-title">公司福利</text>
        <text class="confirm-btn" @click="confirmCustomTag">确认</text>
      </view>
      <view class="popup-content">
        <input 
          class="custom-input" 
          type="text" 
          v-model="customTagValue" 
          placeholder="请输入福利名称"
          focus="true"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedBenefits: ['五险一金'],
      recommendBenefits: [],
      otherBenefits: [],
      otherBenefitLabels: [
        { label: '保险名称', value: '商业保险' },
        { label: '承担方式', value: '个人、公司' },
        { label: '保险费用', value: '70.00元' }
      ],
      showPopup: false,
      customTagValue: ''
    }
  },
  mounted() {
    // 初始化数据
    this.recommendBenefits = [
      '五险一金', '双休/年假', '零食/下午茶/餐补', 
      '团建/旅游', '年终奖/分红', '现金奖励'
    ];
  },
  methods: {
    toggleTag(tag) {
      const index = this.selectedBenefits.indexOf(tag);
      if (index === -1) {
        // 检查是否已达到最大选择数量
        if (this.selectedBenefits.length >= 15) {
          uni.showToast({
            title: '最多只能选择15个福利标签',
            icon: 'none'
          });
          return;
        }
        // 添加到已选标签
        this.selectedBenefits.push(tag);
      } else {
        // 从已选标签中移除
        this.selectedBenefits.splice(index, 1);
      }
    },
    removeTag(tag) {
      const index = this.selectedBenefits.indexOf(tag);
      if (index !== -1) {
        this.selectedBenefits.splice(index, 1);
      }
    },
    showCustomTagPopup() {
      this.showPopup = true;
      this.customTagValue = '';
    },
    closePopup() {
      this.showPopup = false;
    },
    confirmCustomTag() {
      if (this.customTagValue.trim()) {
        // 检查是否已达到最大选择数量
        if (this.selectedBenefits.length >= 15) {
          uni.showToast({
            title: '最多只能选择15个福利标签',
            icon: 'none'
          });
          this.closePopup();
          return;
        }
        // 添加自定义标签
        this.selectedBenefits.push(this.customTagValue.trim());
        this.closePopup();
      } else {
        uni.showToast({
          title: '标签内容不能为空',
          icon: 'none'
        });
      }
    },
    submit() {
      // 保存选中的福利标签
      uni.showLoading({
        title: '保存中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        });
        uni.navigateBack();
      }, 1000);
    }
  }
}
</script>

<style scoped lang="scss">
.companyBenefits {
  background-color: #f5f7f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  .benefits {
    background-color: #fff;
    padding: 0;
    
    .title-row {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      padding: 30rpx 30rpx 20rpx;
      background-color: #fff;
    }
    
    .selected-row {
      padding: 0 30rpx;
      
      .selected-count {
        font-size: 28rpx;
        color: #666666;
        display: block;
        margin-bottom: 16rpx;
      }
      
      .selected-tags {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30rpx;
        
        .selected-tag {
          background-color: #eef6ff;
          color: #4080ff;
          padding: 8rpx 16rpx;
          border-radius: 4rpx;
          font-size: 26rpx;
          margin-right: 20rpx;
          margin-bottom: 16rpx;
          display: flex;
          align-items: center;
          
          .delete-icon {
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #a0b8e0;
          }
        }
      }
    }
    
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      padding: 0 30rpx 30rpx;
      
      .tag {
        background-color: #f5f7f9;
        color: #333333;
        padding: 8rpx 20rpx;
        border-radius: 4rpx;
        font-size: 26rpx;
        margin-right: 20rpx;
        margin-bottom: 16rpx;
        
        &.active {
          background-color: #eef6ff;
          color: #4080ff;
        }
      }
      
      .custom-tag {
        display: inline-flex;
        align-items: center;
        background-color: #f5f7f9;
        color: #4080ff;
        padding: 8rpx 20rpx;
        border-radius: 4rpx;
        font-size: 26rpx;
        margin-bottom: 16rpx;
        
        .custom-icon {
          margin-right: 6rpx;
          font-size: 26rpx;
          color: #4080ff;
        }
      }
    }
    
    .other-benefits {
      padding: 0 30rpx 30rpx;
      
      .benefit-row {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;
        border-bottom: 1px solid #f5f5f5;
        
        .benefit-label {
          color: #666;
          font-size: 28rpx;
        }
        
        .benefit-value {
          color: #333;
          font-size: 28rpx;
        }
      }
    }
  }
  
  .bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx;
    display: flex;
    justify-content: center;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .save-btn {
      width: 100%;
      height: 90rpx;
      background-color: #3A92FF;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      border-radius: 8rpx;
    }
  }
  
  // 底部弹窗样式
  .popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  .popup-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 1000;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
  }
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .cancel-btn {
      font-size: 28rpx;
      color: #999;
    }
    
    .confirm-btn {
      font-size: 28rpx;
      color: #3A92FF;
      font-weight: bold;
    }
  }
  
  .popup-content {
    padding: 60rpx 30rpx;
    
    .custom-input {
      width: 100%;
      height: 80rpx;
      background-color: #f5f7f9;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
  }
}
</style>
